<template>
  <div>
    <div>
        centerData: {{ centerData }}
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { getCenterData } from '../api/index';
import { Route } from 'vue-router';
import { Loading } from 'element-ui';

@Component
export default class Center extends Vue {
    public centerData = '';
    async beforeRouteEnter(to: Route, from: Route, next: (callback: (vm: Center) => void) => void) {
        try {
            const loading = Loading.service({
                lock: true,
                text: 'Loading',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            });
            console.log("test");
            const centerData = await getCenterData();
            next(vm => vm.setCenterData(centerData));
            // next后的函数体仍会执行
            loading.close();
        } catch(e) {
            console.log(e);
        }
    }
    setCenterData(centerData: string) {
        this.centerData = centerData;
    }
}
</script>

<style scoped>
</style>
